

<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="申诉填写" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="baibox">
			<view class="item">
				<view class="tit">
					申诉原因
				</view>
				<input type="text" placeholder="请输入" class="txt_ipt" v-model="title">
			</view>
			<view class="item">
				<view class="tit">
					描述详情
				</view>
				<input type="text" placeholder="请填写相关描述与证据" class="txt_ipt" v-model='desc'>
			</view>
			<view class="item">
				<view class="tit">
					凭证图片 <text>{{fileList1.length}}/8</text>
				</view>
				<view class="imgView">
					<!-- <view v-for="(img,index) in fileList1" class="imgList">
						<image :src="img | formatImgUrl" mode="aspectFill" style="width: 190rpx;height: 190rpx;"></image>
						<view class="imgClose" @click="deletePic(index)">×</view>
					</view>
					<image :src="'/images/up.png' | formatImgUrl" mode="widthFix" style="width: 190rpx;height: 190rpx;"
						@click="onChooseImg" v-if="fileList1.length < 8"></image> -->
						
					<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="8" width="78" height="78" :action="uploadImgUrl" :fileList="fileList1" @afterRead='afterRead' @delete="deletePic">
					</u-upload>
				</view>
			</view>
			<!-- <view v-for="(item,index) in index_info" class="baili" @click="godea(item.title)">
				<view class="txt">
					{{item.title}}
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view> -->
			
		</view>
		<view class="sub" @click="show=true">
			提交
		</view>
		
		<!-- 确认弹窗 -->
		<u-popup mode="center" :show="show">
			<view class="mask">
				<view class="matitle">
					<text>是否确定申请申诉</text>
				</view>
				<view class="matxt">
					
				</view>
				<view class="quque">
					<view class="quli" @click="show = false">
						取消
					</view>
					<view class="quli quactive" @click="submit">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import * as db from '@/common/db.js'
	export default {
		data() {
			return {
				fileList1: [],
				form:{
						id:1,
						type:1
				},
				title:'',
				desc:'',
				index_info:[
					{
						"id":"1",
						"title":"发布不适当内容对我造成骚扰"
					},
					{
						"id":"2",
						"title":"存在欺诈骗钱行为"
					},
					{
						"id":"3",
						"title":"此账号可能被盗用了"
					},
					{
						"id":"4",
						"title":"存在侵权行为"
					},
					{
						"id":"5",
						"title":"引导私下交易"
					},
					{
						"id":"6",
						"title":"发布商业广告"
					},
					{
						"id":"7",
						"title":"团队不规范行为"
					},
					{
						"id":"8",
						"title":"其他"
					}
				],
				userInfo: this.$db.get('userInfo'),
				newtype: '',
				fileList2: [],
				show: false
			}
		},
		
		onLoad(e) {
			//
		
		console.log(e.id,77777777);
				this.form.id = e.id
				if(e.type){
					this.form.type = e.type
				}else{
					this.form.type = 1
				}
				
				this.newtype = e.newtype || ''
		},
		methods: {
			deletePic(index) {
				this.fileList1.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			godea(sid){
				  console.log(this.form,7777);
				  let url = '/pages/find/report_type?sid='+
					sid+'&type='+this.form.type+'&id='+this.form.id
					console.log(url,7777);
					uni.navigateTo({
						url: url
					})
			},
			
			submit() {
				if(!this.title){
					this.$common.errorToShow('请输入举报原因')
				}else if(!this.desc){
					this.$common.errorToShow('请相信描述举报信息')
				} else if(!this.fileList1){
					this.$common.errorToShow('请上传相关凭证')
				}else{
					// let imgs = this.fileList1
					// let formImg = []
					// for(let i in imgs){
					// 	formImg.push(imgs[i].thumb)
					// }
					// this.fileList1 = formImg
					
					// 修改申诉接口 10.20
					this.$api.default.request('user/user_appeal',{
						aid:this.form.id,
						title:this.title,
						desc:this.desc,
						img:this.fileList2,
						type: this.newtype
					}).then((res) => {
						this.$common.successToShow(res.msg, () => {
							uni.navigateBack({delta:1})
						})
						
					})
				}
			},
			onChooseImg() {
				let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.fileList1.push(data)
					}
					console.log(this.fileList1)
				}, 8)
				
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList1[fileListLen]
					this.fileList1.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							that.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo', {}, 'GET', false).then((res) => {
					if (res.code) {
						this.userInfo = res.user
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		padding-top: 20rpx;

		.baibox {
			background-color: #ffffff;
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			.item{
				padding-top: 40rpx;
				.tit{
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
					margin-bottom: 8rpx;
				}
				.txt_ipt{
					font-size: 24rpx;
					color: #999999;
				}
				.imgView {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding-bottom: 20rpx;
					.imgList:nth-child(3n){
						margin-right: 0;
					}
					.imgList {
						position: relative;
						padding-bottom: 10rpx;
						margin-right: 31rpx;
						.imgClose {
							position: absolute;
							top: -8px;
							right: -8px;
							z-index: 1;
							width: 36rpx;
							height: 36rpx;
							background-color: #45C4B0;
							color: #fff;
							line-height: 36rpx;
							text-align: center;
							border-radius: 100px;
						}
					}
				
					.imgList:not(:first-child) {
						// margin-left: 15rpx;
					}
				}
			}
		// 	.baili:last-child {
		// 		border: none;
		// 	}

		// 	.baili {
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: space-between;
		// 		height: 90rpx;
		// 		border-bottom: 1px solid rgba(153, 153, 153, 0.1);
		// 		.pic {
		// 			width: 50rpx;
		// 			height: 50rpx;
		// 			flex-shrink: 0;
		// 		}

		// 		.txt {
		// 			flex-grow: 1;
		// 			padding: 0 16rpx;
		// 			font-size: 24rpx;
		// 			font-weight: bold;
		// 			letter-spacing: 0em;
		// 			color: #3D3D3D;
		// 		}

		// 		.rarr {
		// 			width: 25rpx;
		// 			height: 30rpx;
		// 			flex-shrink: 0;
		// 		}
		// 	}
		// }

		// .tuibox {
		// 	height: 120rpx;
		// 	background-color: #ffffff;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;

		// 	.tpic {
		// 		width: 40rpx;
		// 		height: 40rpx;
		// 	}

		// 	.ttxt {
		// 		font-size: 28rpx;
		// 		font-weight: bold;
		// 		letter-spacing: 0em;
		// 		color: #3D3D3D;
		// 		padding-left: 16rpx;
		// 	}
		}
		.sub{
			width: 630rpx;
			height: 86rpx;
			border-radius: 16rpx;
			text-align: center;
			line-height: 86rpx;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin: 40rpx auto 0;
		}
	}
	
	.mask {
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding-top: 48rpx;
	
		.matitle {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-bottom: 6rpx;
			line-height: 46rpx;
		}
	
		.matxt {
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			letter-spacing: 0em;
			color: #999999;
			line-height: 34rpx;
			padding-bottom: 50rpx;
		}
	
		.quque {
			display: flex;
			align-items: center;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
	
			.quli {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
	
			.quactive {
				background: rgba(69, 196, 176, 0.05);
			}
		}
	}
</style>